<template>
<div>  
    <main id="main" class="container">
    <carousel></carousel>
    <div>
      <h3 class="pb-3">
        <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
          <a class="navbar-brand" href="#">
            <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt="">
            首页推荐 / 1F
          </a>
        </nav>
        <div class="row mb-2">
          <div id="p1" class="col-md-7">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">{{p1.title}}</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">{{p1.details}}</a>
                </h6>
                <span class="text-primary" v-cloak>¥{{p1.price.toFixed(2)}}</span>
                <router-link class="btn btn-primary" :to="`/product/detail/${p1.href.split('=')[1]}`">查看详情</router-link>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" :src="p1.pic" data-holder-rendered="true">
            </div>
          </div>
          <div id="p2" class="col-md-5 pl-0">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">{{p2.title}}</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">{{p2.details}}</a>
                </h6>
                <span class="text-primary" v-cloak>¥{{p2.price.toFixed(2)}}</span>
                <router-link class="btn btn-primary" :to="`/product/detail/${p2.href.split('=')[1]}`">查看详情</router-link>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img2.png" data-holder-rendered="true">
            </div>
          </div>
        </div>
        <div class="row mb-2">
          <div id="p3" class="col-md-5">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-3">{{p3.title}}</h5>
                <span class="text-primary">¥{{p3.price.toFixed(2)}}</span>
                <router-link class="btn btn-primary" :to="`/product/detail/${p3.href.split('=')[1]}`">查看详情</router-link>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" :src="p3.pic" data-holder-rendered="true">
            </div>
          </div>
          <div class="col-md-7 pl-0">
            <div id="others" class="row pr-3">
              <div v-for="(p,i) of others" :key="i"  class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" :src="p.pic" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">{{p.title}}</span>
                    <span class="text-primary small">¥{{p.price.toFixed(2)}}</span>
                    <router-link class="btn btn-sm btn-primary" :to="`/product/detail/${p.href.split('=')[1]}`">查看详情</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </h3>
      <h3 class="pb-3">
        <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
          <a class="navbar-brand" href="#">
            <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt="">
            最新上架 / 2F
          </a>
        </nav>
        <div class="row mb-2">
          <div class="col-md-7">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">Apple MacBook Air系列</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</a>
                </h6>
                <span class="text-primary">¥6988.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=1">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img1.png" data-holder-rendered="true">
            </div>
          </div>
          <div class="col-md-5">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">小米Air 金属超轻薄</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</a>
                </h6>
                <span class="text-primary">¥3488.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=5">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img2.png" data-holder-rendered="true">
            </div>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-md-5">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-3">联想E480C 轻薄系列</h5>
                <span class="text-primary">¥5399.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=9">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img3.png" data-holder-rendered="true">
            </div>
          </div>
          <div class="col-md-7">
            <div class="row pr-3">
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img4.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">华硕RX310 金属超极本</span>
                    <span class="text-primary small">¥4966.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=13">查看详情</a>
                  </div>
                </div>
              </div>
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img5.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">联想小新700 电竞版游戏本</span>
                    <span class="text-primary small">¥6299.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=17">查看详情</a>
                  </div>
                </div>
              </div>
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img3.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">戴尔灵越燃7000 轻薄窄边</span>
                    <span class="text-primary small">¥5199.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=19">查看详情</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </h3>
      <h3 class="pb-3">
        <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
          <a class="navbar-brand" href="#">
            <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt="">
            热销单品 / 3F
          </a>
        </nav>
        <div class="row mb-2">
          <div class="col-md-7">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">Apple MacBook Air系列</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</a>
                </h6>
                <span class="text-primary">¥6988.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=1">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img1.png" data-holder-rendered="true">
            </div>
          </div>
          <div class="col-md-5">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-2">小米Air 金属超轻薄</h5>
                <h6 class="mb-5">
                  <a class="text-dark" href="javascript:;">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</a>
                </h6>
                <span class="text-primary">¥3488.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=5">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img2.png" data-holder-rendered="true">
            </div>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col-md-5">
            <div class="card border-0 flex-md-row box-shadow h-md-250">
              <div class="card-body d-flex flex-column align-items-start">
                <h5 class="d-inline-block mb-3">联想E480C 轻薄系列</h5>
                <span class="text-primary">¥5399.00</span>
                <a class="btn btn-primary" href="product_details.html?lid=9">查看详情</a>
              </div>
              <img class="card-img-right flex-auto d-none d-md-block mt-5" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="/img/index/study_computer_img3.png" data-holder-rendered="true">
            </div>
          </div>
          <div class="col-md-7">
            <div class="row pr-3">
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img4.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">华硕RX310 金属超极本</span>
                    <span class="text-primary small">¥4966.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=13">查看详情</a>
                  </div>
                </div>
              </div>
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img5.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">联想小新700 电竞版游戏本</span>
                    <span class="text-primary small">¥6299.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=17">查看详情</a>
                  </div>
                </div>
              </div>
              <div class="col-md-4 p-0 pl-2">
                <div class="card border-0 text-center">
                  <img class="card-img-top" src="/img/index/study_computer_img3.png" alt="Card image cap">
                  <div class="card-body p-0 pr-1 pl-1">
                    <span class="d-inline-block">戴尔灵越燃7000 轻薄窄边</span>
                    <span class="text-primary small">¥5199.00</span>
                    <a class="btn btn-sm btn-primary" href="product_details.html?lid=19">查看详情</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </h3>
    </div>
    <ul class="nav nav-pills nav-fill mb-3">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="img/footer/icon1.png">
          <h6 class="text-muted">品质保障</h6>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="img/footer/icon2.png">
          <h6 class="text-muted">私人订制</h6>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="img/footer/icon3.png">
          <h6 class="text-muted">学员特供</h6>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <img src="img/footer/icon4.png">
          <h6 class="text-muted">专属特权</h6>
        </a>
      </li>
    </ul>
    <div class="btn-group-vertical position-fixed" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary btn-sm border-light border-left-0 border-right-0">首页<br>推荐</button>
      <button type="button" class="btn btn-secondary btn-sm border-light border-left-0 border-right-0">最新<br>上架</button>
      <button type="button" class="btn btn-secondary btn-sm border-light border-left-0 border-right-0">热销<br>单品</button>
    </div>
  </main>
</div>


</template>
<script>
import Carousel from "@/components/index/Carousel"
import {getIndex} from "@/assets/js/apis/index.js"
export default {
  data(){
    return {
      p1:{price:0, href:""},
      //.toFixed(2) .split('=')
      p2:{price:0, href:""},
      p3:{price:0, href:""},
      //v-for 在数组为空的情况下，一次都不执行，自然就会报错！
      others:[],
      //recommendedItems:[]
    }
  },
  components:{
    Carousel
  },

  beforeCreate(){
    console.log(`创建Index页面组件前...`)
  },
  created(){
    console.log(`创建Index页面组件后...`);
    //console.log(process.env);
    getIndex().then(result=>{
      console.log(result.recommendedItems);   //处理：首页推荐
      var [p1,p2,p3]=result.recommendedItems;
      this.p1=p1;
      this.p2=p2;
      this.p3=p3;
      this.others=result.recommendedItems.slice(3);
    })
  },
  beforeMount(){
    console.log(`挂载Index页面组件前...`);
  },
  mounted(){
    console.log(`挂载Index页面组件后...`);
  },
  beforeUpdate(){
    console.log(`Index页面组件中data对象中的变量被修改前...`);
  },
  updated(){
    console.log(`Index页面组件中data对象中的变量被修改后...`);
  }
}
</script>

<style scoped>
/*定制每层楼中每张商品图片的大小*/
#main>div:nth-child(2)>h3>div:nth-child(2)>div:first-child img{
  margin-left:-200px;
  height: 250px;
}
#main>div:nth-child(2)>h3>div:nth-child(2)>div:last-child img{
  margin-left:-150px;
  height: 200px;
}
#main>div:nth-child(2)>h3>div:nth-child(3)>div:first-child img{
  margin-left:-100px;
  height: 150px;
}
#main>div:nth-child(2)>h3>div:nth-child(3)>div:first-child img{
  margin-left:-100px;
  height: 150px;
}
#main>div:nth-child(2)>h3>div:nth-child(3)>div:last-child .card-img-top{
  height:95px;
}
#main>div:nth-child(2)>h3>div:nth-child(3)>div:last-child .card-body>span:first-child{
  font-size:.2em;
}
/*定制每张商品卡片的背景色*/
#main>div:nth-child(2)>h3 .card{
  background-color:#e8e8e8;
}
/*定制电梯按钮的样式*/
#main>.btn-group-vertical{
  top:100px;
  left:10px;
}
#main>.btn-group-vertical>.btn-secondary:hover {
  background-color: #e4393c;
  border-color: #e4393c;
}

</style>